// 获取学生列表
// 封装函数，后期渲染直接调用
let title = document.querySelector('#modal h5.modal-title')
async function renderStudent() {
    const { data: res } = await axios.get('/students')
    // 遍历获取对象
    let arr = res.data.map(iten => {
        // 放入标签内
        return `
        <tr>
          <td>${iten.name}</td>
          <td>${iten.age}</td>
          <td>${iten.gender ? '女' : '男'}</td>
          <td>${iten.group}</td>
          <td>${iten.hope_salary}</td>
          <td>${iten.salary}</td>
          <td>${iten.province} ${iten.city} ${iten.area}</td>
          <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id=${iten.id} class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id=${iten.id} class="bi bi-trash"></i></a>
          </td>
        </tr>
        `
    })
    // console.log(arr.join(''));
    // 数组渲染到页面
    // 将拿到的对象拼接成字符串放到tbody里
    document.querySelector('tbody').innerHTML = arr.join('')
    document.querySelector('.total').innerHTML = arr.length
}
// 调用函数
renderStudent()

// ------------------------------------初始化模态框----------------------------------------------
// let 变量 = new bootstrap.modal(静态框盒子)
// 变量.show() 模态框显示
// 变量.hide() 模态框隐藏

let modal = new bootstrap.Modal(document.querySelector('#modal'))

// ------------------------------------点击 + 让模态框显示--------------------------------------
// 给 + 添加点击事件
document.querySelector('#openModal').addEventListener('click', function () {
    // 模态框显示
    modal.show()
    // 修改标题为'添加成员'
    title.innerHTML = '添加成员'
    // 重置表单
    document.querySelector('#form').reset()
})

// ----------------------------------省市联动效果-----------------------------------------------
// 找到省市县三个下拉框
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')

// 获取省，并渲染
async function getProvince() {
    const { data: res } = await axios.get('/api/province')
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    province.innerHTML = '<option value="">--省份--</option>' + arr.join('')
}
// 获取市，并渲染
async function getCity() {
    area.innerHTML = '<option value="">--地区--</option>'
    if (province.value === '') {
        city.innerHTML = '<option value="">--城市--</option>'
        return
    }
    const { data: res } = await axios.get('/api/city', { params: { pname: province.value } })
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
}
// 获取省，并渲染
async function getArea() {
    if (city.value === '') {
        area.innerHTML = '<option value="">--地区--</option>'
        return
    }
    const { data: res } = await axios.get('/api/area', { params: { pname: province.value, cname: city.value } })
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
    area.innerHTML = '<option value="">--地区--</option>' + arr.join('')
}
// 调用省市县函数，进去页面马上渲染
getProvince()
// 给省添加change事件，然后调用市
province.addEventListener('change', getCity)
// 给市添加change事件，然后调用县
city.addEventListener('change', getArea)

// ------------------------------------------提交模态框表单--------------------------------------------
// 找到表单添加点击事件，
document.querySelector('#submit').addEventListener('click', async function (e) {
    // 删除默认行为
    e.preventDefault()
    // 用插件获取value值
    let data = val(document.querySelector('#form'))
    // 接口要求把字符串数字转换成数字
    data.age = +data.age
    data.gender = +data.gender
    data.salary = +data.salary
    data.hope_salary = +data.hope_salary
    data.group = +data.group
    // axios提交
    const { data: res } = await axios.post('/students', data)
    // 用插件提示添加成功
    message.success(res.message)
    // 隐藏模态框
    modal.hide()
    // 重新获取全部学员
    renderStudent()
})

// -------------------------------------点击修改跟删除------------------------------
// 
document.querySelector('tbody').addEventListener('click', async function (e) {
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        await axios({
            method: 'DELETE',
            url: `/students/${id}`
        })
        message.success('删除成功')
        renderStudent()
    }
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        let { data: res } = await axios.get(`/students/${id}`)
        modal.show()
        title.innerHTML = '修改学员'
        province.value = res.data.province
        await getCity()
        city.value = res.data.city
        await getArea()
        val(document.querySelector('#form'), res.data)
    }
})